<template>
    <div>
        <h2>房价显示</h2>
        <input type="button" value="导出" @click="dao" >
        <table class="table table-bordered">
<tr>
    <td>房型名称</td>
    <td>房价</td>
    <td>早晨数量</td>
    <td>上限人数</td>
    <td>状态</td>
    <td>操作</td>
</tr>
<tr v-for="item in list">
    <td>{{item.hName}}</td>
    <td>{{item.price}}</td>
    <td>{{item.num}}</td>
    <td>{{item.number}}</td>
    <td>{{item.state==1?"营业":"闭店"}}</td>
    <td>
        <input type="button" value="修改" @click="upd(item.id)" >
    </td>
</tr>
<div>
总条数：{{totalcount  }}
总页数：{{totalpage  }}
当前第{{ state.index }}/{{ totalpage }}
<input type="button" value="首页" @click="page('1')" >
<input type="button" value="上一页" @click="page('2')" >
<input type="button" value="下一页" @click="page('3')" >
<input type="button" value="尾页" @click="page('4')" >
       </div>
</table> 
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive,toRefs } from 'vue';
import { useRouter,useRoute } from 'vue-router';
import axios from 'axios';
const router=useRouter();
let data:any=reactive({
    state:{
index:1,
size:2,
    },
    list:[],
    totalcount:0,
    totalpage:0
})

let{state,list,totalcount,totalpage}=toRefs(data)

onMounted(()=>{
    getlist()
})



const page=(str:any)=>{
switch(str){
    case"1":
    if(state.value.index==1){
alert("已经是第一页")
return;
    }
    state.value.index=1
    ;
    break;
    case"2":
    if(state.value.index==1){
alert("已经是第一页")
return;
    }
    state.value.index--
    ;
    break;
    case"3":
    if(state.value.index==totalpage.value){
alert("已经是最后一页")
return;
    }
    state.value.index++
    ;
    break;
    case"4":
    if(state.value.index==totalpage.value){
alert("已经是最后一页")
return;
    }
    state.value.index=totalpage.value
    ;
    break;
}
getlist()
}
const dao=()=>{
    alert("导出成功")
}
const upd=(id:any)=>{
router.push("/HMupdate")
}
const getlist=()=>{
    let obj={
        index:state.value.index,
        size:state.value.size,
    }
    axios({
        url:'/api/HouseMoney/GetHouseMoney',
        method:'get',
        params:obj
    })
    .then(res=>{
        console.log(res)
        list.value=res.data.data,
        totalcount.value=res.data.totalcount,
        totalpage.value=res.data.totalpage
    })
    .catch(err=>{
        console.log(err)
    })
}
</script>

<style scoped>

</style>